import { Component, OnInit, NgModule } from '@angular/core';
import { EChartOption } from 'echarts';
import { DataVisualizationService } from '../../dataVisualization.service';
import { differenceInYears } from 'date-fns';
import { PublicService } from 'app/public/public.service';
import { SELECT_OPTIONS } from 'app/app.constants';
import { differenceInCalendarDays } from 'date-fns';

@Component({
    selector: 'itmp-alert',
    templateUrl: './alert.component.html',
    styleUrls: ['./alert.component.css']
})
export class AlertComponent implements OnInit {
    options: EChartOption;
    searchData: any;
    updatedDate = null;
    allGroupBy: any;
    data: any;
    xAxis = [];
    selectLanguage = '';
    constructor(private ds: DataVisualizationService, private pub: PublicService) {}

    ngOnInit() {
        this.initData();
    }

    getSelectionList() {
        const response = this.pub.getSelectOptionsList(SELECT_OPTIONS.ALERT_TYPE);
        this.allGroupBy = response.data;

        this.searchData.alertType = this.allGroupBy[0];

        this._getData();
        this.allGroupBy.forEach(group => {
            if (localStorage.getItem('itmp_lang') === 'en') {
                group.displayName = group.name;
                this.selectLanguage = 'en';
            } else {
                group.displayName = group.vietName;
                this.selectLanguage = 'yuenan';
            }
        });
    }

    initData() {
        const date = new Date();
        const startTime = new Date(date.getTime() - 1000 * 60 * 60 * 24 * 365);
        const endTime = new Date();
        this.updatedDate = [startTime, endTime];
        this.searchData = {
            alertType: null,
            startTime,
            endTime
        };
        this.getSelectionList();
    }

    formatDate(date) {
        const newDate = new Date(date);
        return newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate();
    }

    _getData() {
        const params = [];
        for (const key in this.searchData) {
            if (this.searchData.hasOwnProperty(key)) {
                const element = this.searchData[key];
                params.push(`${key}=${key !== 'alertType' ? this.formatDate(element) : element['name']}`);
            }
        }
        this.ds.getIncidentAnalyticsReport(115, params.join(',')).subscribe(res => {
            this.xAxis = [];
            this.data = [];
            if (res.messagecode === '000000') {
                res.data.forEach(item => {
                    this.xAxis.push(item.interval_zone);
                    this.data.push(item.total);
                });
                this._setOptions();
            }
        });
    }

    // 渲染图表
    _setOptions() {
        this.options = {
            backgroundColor: '#363a70', //背景色
            grid: {
                bottom: 50
            },
            xAxis: {
                type: 'category',
                data: this.xAxis,
                splitLine: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        //x轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                }
            },
            tooltip: {},
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        //x轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                }
            },
            series: [
                {
                    data: this.data,
                    type: 'bar',
                    barMaxWidth: 100,
                    itemStyle: {
                        color: 'rgba(35,140,230,0.7)'
                    }
                }
            ]
        };
    }

    // 日历框事件
    onDateOk(result: Date): void {
        this.searchData.startTime = this.ds.changeDate(result[0], 0);
        this.searchData.endTime = this.ds.changeDate(result[1], 0);
        if (new Date(result[1]).getFullYear() - new Date(result[0]).getFullYear() > 1) {
        }
        this._getData();
    }

    changeGroupBy(data) {
        console.log(data, '选中的选项');

        this.searchData.alertType = data;
        this._getData();
    }

    disabledDate = (current: Date): boolean => {
        // Can not select days before today and today
        return differenceInCalendarDays(current, new Date()) > 0;
    };
}
